<template>
  <div id="app"></div>
</template>
      
      <script>
import * as PIXI from "pixi.js";
export default {
  setup() {
    let app = new PIXI.Application({
      width: window.innerWidth,
      height: window.innerHeight,
      backgroundColor: "white",
      resolution: window.devicePixelRatio || 1,
    });
    // 前面我们做精灵图的时候使用了require的方式去引入图片，但是未来我们一个项目用到的图片可不止一张，那么要怎么做呢？可以利用PIXI.Assets.add(名称,路径)来完成图片的添加

    // 添加资源，注意是添加不是加载，因为你添加的不见得你一定会用
    PIXI.Assets.add("bcsz", require("./assets/imgs/bcsz.png"));
    PIXI.Assets.add("nl", require("./assets/imgs/nl.png"));
    PIXI.Assets.add("kq", require("./assets/imgs/kq.png"));

    /*
        加载资源, 
        参数1传入一个数组, 每一项就是前面添加的资源里你起的名字, 返回值是一个promise对象
        参数2(非必须)传入一个函数, 这个函数会在加载时执行，并且这个函数的参数progress可以实时看到进度。
    */ 
    let picturesPromise = PIXI.Assets.load(["bcsz", "nl", "kq"],(progress)=>{
        console.log(`当前进度${progress}`);
    });

    // 这个promise对象的成功回调里自动传入一个参数textures，这个东西里面包含了上面所有你加载了的图片，通过 textures.名字  即可读取到。我们直接这样new PIXI.Sprite()就行了，不用再创建纹理。
    picturesPromise.then((textures) => {
      let sprite1 = new PIXI.Sprite(textures.bcsz);
      let sprite2 = new PIXI.Sprite(textures.nl);
      let sprite3 = new PIXI.Sprite(textures.kq);

      sprite1.x = 200;
      sprite1.y = 200;
      sprite1.width = 100;
      sprite1.height = 100;

      sprite2.x = 400;
      sprite2.y = 200;
      sprite2.width = 100;
      sprite2.height = 100;

      sprite3.x = 600;
      sprite3.y = 200;
      sprite3.width = 100;
      sprite3.height = 100;

      app.stage.addChild(sprite1);
      app.stage.addChild(sprite2);
      app.stage.addChild(sprite3);
    });
    document.body.appendChild(app.view);
  },
};
</script>
      
<style>
canvas {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
      